<template>
	<div class="header clearfix">
		<div class="header-left">
			<p class="title">
				<span>{{options.leftTitle}}</span>
				<span>{{options.leftNum}}</span>
			</p>
		</div>
		<div class="header-right">
			<p class="title">
				<span>{{options.rightTitle}}</span>
				<span>{{options.rightNum}}</span>
			</p>
			<ul class="evaluation clearfix">
				<li class="evalItem">
					<img src="../../assets/img/evaluated.png" class="">
					<p class="item">已测评：{{options.evaluated}}人</p>
				</li>
				<li class="evalItem borderNull">
					<img src="../../assets/img/beforeEvaluated.png" class="">
					<p class="item">未测评：{{options.evaluation}}人</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default{
	props:{
		options:{
			type: Object,
			require: true
		}
	},
	data(){
		return {
			
		}
	}
}
</script>

<style scoped="scoped">
.header-left,.header-right{
	float: left;
	width: 49%;
	margin-right: 20px;
	border-radius: 6px;
	background-color: #FDBC34;
	height: 200px;
}
.header-right{
	margin: 0;
	background-color: #FF5F66;
}
.title,.evaluation{
	width: 95%;
	margin: 20px auto;
}
.title{
	color: #FDBC34;
	border-radius: 8px;
	text-align: center;
	height: 40px;
	line-height: 40px;
	background-color: #fff;
	padding: 0;
}
.header-right .title{
	color: #FF5F66;
}
.evalItem{
	float: left;width: 49%;
	height: 100px;text-align: center;
	border-right: 1px solid #FFAFB3;
}
.borderNull{
	border-right: 0;
}
.evalItem img{
	margin-top: 10px;
	width: 40px;
	height: 40px;
}
.evalItem .item{
	font-size: 14px;
	color: #fff;
	line-height: 40px;
}
</style>
